<template>
  <!-- 查看修改讲师申请表单 -->
  <el-dialog
    :visible.sync="dialogVisible"
    width="50%"
    :title="title"
    @close="close">

    <el-form
      ref="auditForm"
      :rules="auditRules"
      status-icon
      :model="audit"
      label-width="100px">

      <el-form-item prop="userId" label="用户编号">
        <el-input v-model="audit.userId"
                  oninput = "value=value.replace(/[^\d]/g,'')"
                  maxlength="19"
                  disabled
                  autocomplete="off"/>
      </el-form-item>

      <el-form-item prop="name" label="真实姓名">
        <el-input v-model="audit.name"
                  oninput="value=value.replace(/[^\u4E00-\u9FA5]/g, '');"
                  maxlength="10"
                  :disabled="formAction === 'view'"
                  autocomplete="off"/>
      </el-form-item>

      <el-form-item prop="intro" label="自身资历">
        <el-input v-model="audit.intro"
                  maxlength="100"
                  show-word-limit
                  placeholder="请输入自身的资历，头衔，例如：上海师范大学法学院副教授，华东师范大学数学系硕士生导师等。"
                  type="textarea"
                  :rows="3"
                  :disabled="formAction === 'view'"
                  autocomplete="off"/>
      </el-form-item>

      <el-form-item prop="career" label="自身简介">
        <el-input v-model="audit.career"
                  maxlength="500"
                  show-word-limit
                  placeholder="请输入自身的教育经历，任职地点，工作项目等信息。"
                  type="textarea"
                  :rows="7"
                  :disabled="formAction === 'view'"
                  autocomplete="off"/>
      </el-form-item>

    </el-form>

    <div slot="footer" class="dialog-footer" v-if="formAction === 'edit'">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="saveOrUpdate">确定</el-button>
    </div>

    <div slot="footer" class="dialog-footer" v-if="formAction === 'view'">
      <el-button type="primary" @click="close">确定</el-button>
    </div>

  </el-dialog>
</template>

<script>
  import {validName, validNormal} from '@/validate/register'
  import {getAuditById,updateAudit} from '@/api/audit';
  import {mapGetters} from 'vuex';

  export default {
    data() {

      //检验资历
      const validateIntro = (rule, value, callback) => {
        if (value.length < 5 || value.length > 100 || !validNormal(value)){
          callback(new  Error("请输入正确的资历，长度要求为5-100，且不能输入特殊字符"))
        }
        else callback()
      }

      //检验简介
      const validateCareer = (rule, value, callback) => {
        if (value.length < 50 || value.length > 500 || !validNormal(value)){
          callback(new  Error("请输入正确的简介，长度要求为50-500，且不能输入特殊字符"))
        }
        else callback()
      }

      //检验姓名
      const validateName = (rule, value, callback) => {
        if (!validName(value)){
          callback(new  Error("请输入正确的姓名，长度要求为2-10，只能输入中文"))
        }
        else callback()
      }


      return {
        title: '',
        dialogVisible: false,
        audit: {
          auditId: '',
          userId: '',
          intro: '',
          name: '',
          career: '',
        },
        formAction: '',
        //检验规则
        auditRules:{
          intro:[{validator: validateIntro,trigger: 'blur'}],
          career:[{validator: validateCareer,trigger: 'blur'}],
          name:[{validator: validateName,trigger: 'blur'}],
        }
      }
    },

    methods: {
      open(action) {
        this.dialogVisible = true
        getAuditById(this.userId).then(result => {
          let { code, data } = result
          if (code === 20000){
            this.audit = data.item
            delete this.audit.gmtCreate
            delete this.audit.gmtModified
            delete this.audit.sort
            delete this.audit.status
            delete this.audit.opinion
          }
        })
        if (action === 'edit'){
          this.title = '修改讲师申请'
          this.formAction = 'edit'
        }
        else {
          this.title = '查看讲师申请'
          this.formAction = 'view'
        }
      },

      close() {
        this.$refs.auditForm.resetFields()
        this.dialogVisible = false
        // 重置表单
        this.resetForm()
      },

      resetForm() {
        this.audit.auditId = ''
        this.audit.userId = ''
        this.audit.name = ''
        this.audit.intro = ''
        this.audit.career = ''
      },

      saveOrUpdate() {
        this.$refs.auditForm.validate((valid) => {
          if (valid) {
            //检验通过
            this.update()
          }
          else {
            return false
          }
        })
      },

      update(){
        updateAudit(this.$qs.stringify(this.audit)).then(result => {
          if (result.code === 20000){
            this.$message.success("修改申请成功！")
            // 关闭组件
            this.close()
            // 调用父组件监听函数
            this.$emit('onSaveSuccess')
          }
        })
      }
    },
    computed: {
      ...mapGetters({
        'userId': 'id'
      })
    },

  }
</script>

<style scoped>

</style>
